<script>
// <template>
//   <div class="xtx-bread">
//     <slot></slot>
//   </div>
// </template>
// h===createElement
import { h } from 'vue'
export default {
  name: 'XtxBread',
  props: {
    sep: {
      type: String,
      default: '>'
    }
  },
  render () {
    /*
    render:h=>h(APP)
    render(h){
        h:createELement(标签名(组件),{属性配制},[子集虚拟dom])
        return h(APP)
    }
    */
    // console.log('slot:', this.$slots.default())
    // 最后一项不要i标签，其它项最后都要
    // 获取当前组件的所有默认插件的子集数组（虚拟dom）
    const _childrenArr = this.$slots.default()
    const _temp = []
    // 将子集循环
    _childrenArr.forEach((item, index) => {
      // 将当前虚拟dom当前项添加到一个新数组
      _temp.push(item)
      //   最后一项不要i标签，其它项最后都要
      //   如果当前项虚拟dom不是最后一项，就添加i箭头标签
      if (index !== _childrenArr.length - 1) {
        //   创建虚拟dom持i标签并添加到新数组
        // _temp.push(h('i', { class: 'iconfont icon-angle-right' }))
        _temp.push(h('i', { class: 'iconfont icon-angle-right' }))
      }
    })
    // return什么虚拟dom就渲染什么dom
    return h('div', { class: 'xtx-bread' }, _temp)
  },
  mounted () {
    // console.log('slot:', this.$slots.default())
    // console.log('slot:', this.$slots.abc())
  }
}
</script>

<style scoped lang="less">
.xtx-bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
